<template>
  <div class="image-compare">

    <!-- 核心对比容器 -->
    <div
        ref="container"
        class="comparison-wrap"
    >
      <!-- 左侧图 -->
      <img
          :src="leftImage"
          alt="原图"
          class="compare-img"
          :style="{ clipPath: `inset(0 ${100 - position}% 0 0)` }"
      />
      <!-- 右侧图 -->
      <img
          :src="rightImage"
          alt="处理后"
          class="compare-img"
          :style="{ clipPath: `inset(0 0 0 ${position}%)` }"
      />
      <!-- 滑块轨道 -->
      <div
          class="slider-track"
          :style="{ transform: `translateX(calc(${position}% - 50%))` }"
      >
        <!-- 分割线 -->
        <div class="slider-line"></div>
        <!-- 滑块手柄 -->
        <div
            ref="handle"
            class="slider-handle"
            @mousedown="startDrag"
            @touchstart="startDrag"
        >
          <svg class="handle-icon" viewBox="0 0 24 24">
            <path d="M21 12H3M3 12L9 6M3 12L9 18M21 12L15 6M21 12L15 18"
                  stroke="currentColor" stroke-width="2" fill="none" />
          </svg>
        </div>
      </div>
    </div>

    <!-- 说明文字 -->
    <div class="labels">
      <span class="labels-left"   :class="{ 'hidden': position >= 95 }">{{leftLabel}}</span>
      <span class="labels-right"    :class="{ 'hidden': position <= 5 }">{{rightLabel}}</span>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

defineProps({
  leftImage: { type: String, required: true },
  rightImage: { type: String, required: true },
  leftLabel: { type: String, default: '原图' },
  rightLabel: { type: String, default: '处理后' },
});

const position = ref(50);    // 滑块位置(0-100)
const container = ref<HTMLDivElement | null>(null);
const handle = ref<HTMLDivElement | null>(null);
let isDragging = false;

// 开始拖动（兼容鼠标/触摸）
const startDrag = (e: MouseEvent | TouchEvent) => {
  e.preventDefault();
  isDragging = true;
  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', endDrag);
  document.addEventListener('touchmove', drag);
  document.addEventListener('touchend', endDrag);
  handle.value?.classList.add('active');
};

// 拖动逻辑
const drag = (e: MouseEvent | TouchEvent) => {
  if (!isDragging || !container.value) return;

  const rect = container.value.getBoundingClientRect();
  const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;

  // 计算百分比
  let p = ((clientX - rect.left) / rect.width) * 100;
  p = Math.max(0, Math.min(100, p)); // 限制范围
  position.value = p;
};

// 结束拖动
const endDrag = () => {
  isDragging = false;
  document.removeEventListener('mousemove', drag);
  document.removeEventListener('mouseup', endDrag);
  document.removeEventListener('touchmove', drag);
  document.removeEventListener('touchend', endDrag);
  handle.value?.classList.remove('active');
};

// 窗口变化重置
onMounted(() => window.addEventListener('resize', () => position.value = 50));
onUnmounted(() => window.removeEventListener('resize', () => position.value = 50));
</script>

<style scoped>
/* 基础布局 */
.image-compare {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

.title {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #333;
}

/* 对比容器 */
.comparison-wrap {
  position: relative;
  width: 100%;
  height: 400px; /* 可自定义高度 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background: #f5f5f5;
}

.compare-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: clipPath 0.3s ease;
}

/* 滑块轨道 */
.slider-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.slider-line {
  width: 2px;
  height: 100%;
  background: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
}

/* 滑块手柄（缩小尺寸） */
.slider-handle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;  /* 缩小手柄 */
  height: 32px; /* 缩小手柄 */
  background: #fff;
  border: 2px solid #999;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.slider-handle:hover {
  transform: translateY(-50%) scale(1.1);
  border-color: #666;
}

.slider-handle.active {
  cursor: grabbing;
  transform: translateY(-50%) scale(0.95);
  background: #f8f8f8;
}

.handle-icon {
  width: 16px;  /* 缩小图标 */
  height: 16px; /* 缩小图标 */
  color: #666;
}

/* 说明文字 */
.labels {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  margin: 1rem 0;
  position: absolute;
  top: 20px;
  width: 90%;
}

.labels span {
  background: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  font-size: 0.9rem;
}

/* 隐藏标签的样式 */
.hidden {
  opacity: 0;
  pointer-events: none;
}

.tip {
  text-align: center;
  color: #777;
  font-size: 0.85rem;
  margin: 0;
}

/* 响应式 */
@media (max-width: 600px) {
  .comparison-wrap {
    height: 250px;
  }
  .slider-handle {
    width: 28px;
    height: 28px;
  }
}
</style>
